<!doctype html>
<html lang="en-US" dir="ltr">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Phoenix</title>
    <link rel="apple-touch-icon" sizes="180x180" href="static/img/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="static/img/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="static/img/favicons/favicon-16x16.png">
    <link rel="shortcut icon" type="image/x-icon" href="static/img/favicons/favicon.ico">
    <link rel="manifest" href="static/img/favicons/manifest.json">
    <meta name="msapplication-TileImage" content="static/img/favicons/mstile-150x150.png">
    <meta name="theme-color" content="#ffffff">
    <link rel="preconnect" href="https://fonts.gstatic.com/">
    <link href="static/css/css2.css" rel="stylesheet">
    <link href="static/css/css21.css" rel="stylesheet">
    <link href="static/css/phoenix.min.css" rel="stylesheet" id="style-default">
    <link href="#" rel="stylesheet" id="user-style-default">
    <style>
      body {
        opacity: 0;
      }
    </style>
  </head>

  <body>
    <main class="main" id="top">
      <div class="container-fluid px-0">
        <nav class="navbar navbar-light navbar-vertical navbar-vibrant navbar-expand-lg">
          <div class="collapse navbar-collapse" id="navbarVerticalCollapse">
            <div class="navbar-vertical-content scrollbar">
              <ul class="navbar-nav flex-column" id="navbarVerticalNav">
                <li class="nav-item"><a class="nav-link" href="index.html">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="cast"></span></span><span class="nav-link-text">Dashbboard</span></div>
                  </a></li>
                <li class="nav-item">
                  <p class="navbar-vertical-label">Pages</p><a class="nav-link" href="starter.html" role="button" data-bs-toggle="" aria-expanded="false">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="flag"></span></span><span class="nav-link-text">Starter</span></div>
                  </a><a class="nav-link dropdown-indicator" href="#errors" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="errors">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="alert-triangle"></span></span><span class="nav-link-text">Errors</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent" id="errors">
                    <li class="nav-item"><a class="nav-link" href="404.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">404</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="500.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">500</span></div>
                      </a></li>
                  </ul><a class="nav-link dropdown-indicator" href="#authentication" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="authentication">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="lock"></span></span><span class="nav-link-text">Authentication</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent" id="authentication">
                    <li class="nav-item"><a class="nav-link" href="sign-in.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Sign in</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="sign-up.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Sign up</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="sign-out.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Sign out</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="forgot-password.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Forgot password</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="reset-password.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Reset password</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="lock-screen.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Lock screen</span></div>
                      </a></li>
                  </ul>
                </li>
                <li class="nav-item">
                  <p class="navbar-vertical-label">Modules</p><a class="nav-link dropdown-indicator" href="#forms" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="forms">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="file-text"></span></span><span class="nav-link-text">Forms</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent" id="forms">
                    <li class="nav-item"><a class="nav-link" href="form-control.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Form control</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="input-group.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Input group</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="select.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Select</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="checks.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Checks</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="range.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Range</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="layout.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Layout</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="floating-labels.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Floating labels</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="validation.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Validation</span></div>
                      </a></li>
                  </ul><a class="nav-link dropdown-indicator" href="#tables" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="tables">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="columns"></span></span><span class="nav-link-text">Tables</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent show" id="tables">
                    <li class="nav-item"><a class="nav-link" href="basic-tables.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Basic tables</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link active" href="" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Advance tables</span></div>
                      </a></li>
                  </ul><a class="nav-link dropdown-indicator" href="#components" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="components">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="package"></span></span><span class="nav-link-text">Components</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent" id="components">
                    <li class="nav-item"><a class="nav-link" href="accordion.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Accordion</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="avatar.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Avatar</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="alerts.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Alerts</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="badge.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Badge</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="breadcrumb.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Breadcrumb</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="button.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Buttons</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="card.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Card</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="carousel.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Carousel</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="collapse.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Collapse</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="dropdown.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Dropdown</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="list-group.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">List group</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="modal.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Modals</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="offcanvas.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Offcanvas</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="progress-bar.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Progress bar</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="placeholder.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Placeholder</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="pagination.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Pagination</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="popovers.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Popovers</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="scrollspy.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Scrollspy</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="spinners.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Spinners</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="toast.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Toast</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="tooltips.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Tooltips</span></div>
                      </a></li>
                  </ul><a class="nav-link dropdown-indicator" href="#utilities" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="utilities">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="tool"></span></span><span class="nav-link-text">Utilities</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent" id="utilities">
                    <li class="nav-item"><a class="nav-link" href="background.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Background</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="borders.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Borders</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="colors.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Colors</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="display.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Display</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="flex.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Flex</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="float.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Float</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="interactions.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Interactions</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="opacity.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Opacity</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="overflow.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Overflow</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="position.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Position</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="shadows.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Shadows</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="sizing.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Sizing</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="spacing.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Spacing</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="typography.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Typography</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="javascript:;" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Vertical align</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="javascript:;" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Visibility</span></div>
                      </a></li>
                  </ul><a class="nav-link dropdown-indicator" href="#multi-level" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="multi-level">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="layers"></span></span><span class="nav-link-text">Multi level</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent" id="multi-level">
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#level-two" data-bs-toggle="collapse" aria-expanded="false" aria-controls="multi-level">
                        <div class="d-flex align-items-center">
                          <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-text">Level two</span>
                        </div>
                      </a>
                      <ul class="nav collapse parent" id="level-two">
                        <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                            <div class="d-flex align-items-center"><span class="nav-link-text">Item 1</span></div>
                          </a></li>
                        <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                            <div class="d-flex align-items-center"><span class="nav-link-text">Item 2</span></div>
                          </a></li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#level-three" data-bs-toggle="collapse" aria-expanded="false" aria-controls="multi-level">
                        <div class="d-flex align-items-center">
                          <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-text">Level three</span>
                        </div>
                      </a>
                      <ul class="nav collapse parent" id="level-three">
                        <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                            <div class="d-flex align-items-center"><span class="nav-link-text">Item 3</span></div>
                          </a></li>
                        <li class="nav-item"><a class="nav-link dropdown-indicator" href="#item-4" data-bs-toggle="collapse" aria-expanded="false" aria-controls="level-three">
                            <div class="d-flex align-items-center">
                              <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-text">Item 4</span>
                            </div>
                          </a>
                          <ul class="nav collapse parent" id="item-4">
                            <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                                <div class="d-flex align-items-center"><span class="nav-link-text">Item 5</span></div>
                              </a></li>
                            <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                                <div class="d-flex align-items-center"><span class="nav-link-text">Item 6</span></div>
                              </a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#level-four" data-bs-toggle="collapse" aria-expanded="false" aria-controls="multi-level">
                        <div class="d-flex align-items-center">
                          <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-text">Level four</span>
                        </div>
                      </a>
                      <ul class="nav collapse parent" id="level-four">
                        <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                            <div class="d-flex align-items-center"><span class="nav-link-text">Item 6</span></div>
                          </a></li>
                        <li class="nav-item"><a class="nav-link dropdown-indicator" href="#item-7" data-bs-toggle="collapse" aria-expanded="false" aria-controls="level-four">
                            <div class="d-flex align-items-center">
                              <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-text">Item 7</span>
                            </div>
                          </a>
                          <ul class="nav collapse parent" id="item-7">
                            <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                                <div class="d-flex align-items-center"><span class="nav-link-text">Item 8</span></div>
                              </a></li>
                            <li class="nav-item"><a class="nav-link dropdown-indicator" href="#item-9" data-bs-toggle="collapse" aria-expanded="false" aria-controls="item-7">
                                <div class="d-flex align-items-center">
                                  <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-text">Item 9</span>
                                </div>
                              </a>
                              <ul class="nav collapse parent" id="item-9">
                                <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                                    <div class="d-flex align-items-center"><span class="nav-link-text">Item 10</span></div>
                                  </a></li>
                                <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                                    <div class="d-flex align-items-center"><span class="nav-link-text">Item 11</span></div>
                                  </a></li>
                              </ul>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li class="nav-item">
                  <p class="navbar-vertical-label">Documentation</p><a class="nav-link" href="getting-started.html" role="button" data-bs-toggle="" aria-expanded="false">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="life-buoy"></span></span><span class="nav-link-text">Getting started</span></div>
                  </a><a class="nav-link dropdown-indicator" href="#customization" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="customization">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="settings"></span></span><span class="nav-link-text">Customization</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent" id="customization">
                    <li class="nav-item"><a class="nav-link" href="styling.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Styling</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="plugin.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Plugin</span></div>
                      </a></li>
                  </ul><a class="nav-link" href="webpack.html" role="button" data-bs-toggle="" aria-expanded="false">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="hexagon"></span></span><span class="nav-link-text">Webpack</span></div>
                  </a><a class="nav-link" href="design-file.html" role="button" data-bs-toggle="" aria-expanded="false">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="figma"></span></span><span class="nav-link-text">Design file</span></div>
                  </a><a class="nav-link" href="changelog.html" role="button" data-bs-toggle="" aria-expanded="false">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="git-merge"></span></span><span class="nav-link-text">Changelog</span></div>
                  </a>
                </li>
              </ul>
            </div>
            <div class="navbar-vertical-footer"><a class="btn btn-link border-0 fw-semi-bold d-flex ps-0" href="#!"><span class="navbar-vertical-footer-icon" data-feather="log-out"></span><span>Settings</span></a></div>
          </div>
        </nav>
        <nav class="navbar navbar-light navbar-top navbar-expand">
          <div class="navbar-logo"><button class="btn navbar-toggler navbar-toggler-humburger-icon" type="button" data-bs-toggle="collapse" data-bs-target="#navbarVerticalCollapse" aria-controls="navbarVerticalCollapse" aria-expanded="false" aria-label="Toggle Navigation"><span class="navbar-toggle-icon"><span class="toggle-line"></span></span></button> <a class="navbar-brand me-1 me-sm-3" href="index.html">
              <div class="d-flex align-items-center">
                <div class="d-flex align-items-center"><img src="static/picture/logo.png" alt="phoenix" width="32">
                  <p class="logo-text ms-2 d-none d-sm-block">phoenix</p>
                </div>
              </div>
            </a></div>
          <div class="collapse navbar-collapse">
            <div class="search-box d-none d-lg-block">
              <form class="position-relative" data-bs-toggle="search" data-bs-display="static"><input class="form-control form-control-sm search-input search min-h-auto" type="search" placeholder="Search..." aria-label="Search"> <span class="fas fa-search search-box-icon"></span></form>
            </div>
            <ul class="navbar-nav navbar-nav-icons ms-auto flex-row">
              <li class="nav-item dropdown"><a class="nav-link" id="navbarDropdownNotification" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="text-700" data-feather="bell" style="height:20px;width:20px;"></span></a></li>
              <li class="nav-item dropdown"><a class="nav-link notification-indicator notification-indicator-primary" id="navbarDropdownSettings" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="text-700" data-feather="settings" style="height:20px;width:20px;"></span></a></li>
              <li class="nav-item dropdown"><a class="nav-link" id="navbarDropdownNindeDots" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="2" cy="2" r="2" fill="#6C6E71"></circle>
                    <circle cx="2" cy="8" r="2" fill="#6C6E71"></circle>
                    <circle cx="2" cy="14" r="2" fill="#6C6E71"></circle>
                    <circle cx="8" cy="8" r="2" fill="#6C6E71"></circle>
                    <circle cx="8" cy="14" r="2" fill="#6C6E71"></circle>
                    <circle cx="14" cy="8" r="2" fill="#6C6E71"></circle>
                    <circle cx="14" cy="14" r="2" fill="#6C6E71"></circle>
                    <circle cx="8" cy="2" r="2" fill="#6C6E71"></circle>
                    <circle cx="14" cy="2" r="2" fill="#6C6E71"></circle>
                  </svg></a>
                <div class="dropdown-menu dropdown-menu-end py-0 dropdown-nide-dots shadow border border-300" aria-labelledby="navbarDropdownNindeDots">
                  <div class="card bg-white position-relative border-0">
                    <div class="card-body pt-3 px-3 pb-0 overflow-auto scrollbar" style="height: 20rem;">
                      <div class="row text-center align-items-center gx-0 gy-0">
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/behance.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Behance</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/google-cloud.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Cloud</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/slack.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Slack</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/github.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Github</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/bitbucket.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">BitBucket</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/google-drive.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Drive</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/trello.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Trello</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/figma.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Figma</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/twitter.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Twitter</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/pinterest.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Pinterest</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/linkedin.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Linkedin</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/google-maps.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Maps</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/google-photos.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Photos</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/spotify.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Spotify</p>
                          </a></div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="nav-item dropdown"><a class="nav-link lh-1 px-0 ms-5" id="navbarDropdownUser" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <div class="avatar avatar-l"><img class="rounded-circle" src="static/picture/57.png" alt=""></div>
                </a>
                <div class="dropdown-menu dropdown-menu-end py-0 dropdown-profile shadow border border-300" aria-labelledby="navbarDropdownUser">
                  <div class="card bg-white position-relative border-0">
                    <div class="card-body p-0 overflow-auto scrollbar" style="height: 18rem;">
                      <div class="text-center pt-4 pb-3">
                        <div class="avatar avatar-xl"><img class="rounded-circle" src="static/picture/57.png" alt=""></div>
                        <h6 class="mt-2">Jerry Seinfield</h6>
                      </div>
                      <div class="mb-3 mx-3"><input class="form-control form-control-sm" id="exampleFormControlInput1" placeholder="Update your status"></div>
                      <ul class="nav d-flex flex-column mb-2 pb-1">
                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="user"></span>Profile</a></li>
                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="pie-chart"></span>Dashboard</a></li>
                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="lock"></span>Posts &amp; Activity</a></li>
                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="settings"></span>Settings &amp; Privacy</a></li>
                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="help-circle"></span>Help Center</a></li>
                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="globe"></span>Language</a></li>
                      </ul>
                    </div>
                    <div class="card-footer p-0 border-top">
                      <ul class="nav d-flex flex-column my-3">
                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="user-plus"></span>Add another account</a></li>
                      </ul>
                      <hr>
                      <div class="px-3"><a class="btn btn-phoenix-secondary d-flex flex-center w-100" href="#!"><span class="me-2" data-feather="log-out"></span>Sign out</a></div>
                      <div class="my-2 text-center fw-bold fs--2 text-600"><a class="text-600 me-1" href="#!">Privacy policy</a>&bull;<a class="text-600 mx-1" href="#!">Terms</a>&bull;<a class="text-600 ms-1" href="#!">Cookies</a></div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </nav>
        <div class="content pt-5">
          <h2 class="mb-2 lh-sm">Advance Tables</h2>
          <p class="text-700 lead mb-2">Phoenix uses <b>List.Js</b> for advance table. List.Js is a Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript library that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.</p><a class="btn btn-link p-0" href="javascript:;" target="_blank">Documentation for List.js<span class="ms-1" data-feather="chevron-right"></span></a>
          <div class="mt-4">
            <div class="row g-4">
              <div class="col-12 col-xl-10 order-1 order-xl-0">
                <div class="card shadow-none border border-300 mb-3" data-component-card="">
                  <div class="card-header p-4 border-bottom border-300 bg-soft">
                    <div class="row g-3 justify-content-between align-items-center">
                      <div class="col-12 col-md">
                        <h3 class="text-900 mb-0" data-anchor="">Example</h3>
                      </div>
                      <div class="col col-md-auto">
                        <nav class="nav nav-underline justify-content-end border-0 doc-tab-nav align-items-center" role="tablist"><button class="btn btn-link px-2 text-900 copy-code-btn" type="button">
                            <div class="fas fa-copy me-1"></div>Copy Code
                          </button><a class="btn btn-sm btn-phoenix-primary code-btn ms-2" data-bs-toggle="collapse" href="#example-code" role="button" aria-controls="example-code" aria-expanded="false"> <span class="me-2" data-feather="code"></span>View code</a><a class="btn btn-sm btn-phoenix-primary preview-btn ms-2"><span class="me-2" data-feather="eye"></span>Preview</a></nav>
                      </div>
                    </div>
                  </div>
                  <div class="card-body p-0">
                    <div class="collapse code-collapse" id="example-code"><pre class="scrollbar" style="max-height:420px"><code class="language-html">&lt;div class=&quot;my-4&quot; id=&quot;tableExample&quot; data-list='{&quot;valueNames&quot;:[&quot;name&quot;,&quot;email&quot;,&quot;age&quot;],&quot;page&quot;:5,&quot;pagination&quot;:true}'&gt;
  &lt;div class=&quot;table-responsive scrollbar&quot;&gt;
    &lt;table class=&quot;table table-bordered table-striped fs--1 mb-0&quot;&gt;
      &lt;thead class=&quot;bg-200 text-900&quot;&gt;
        &lt;tr&gt;
          &lt;th class=&quot;sort&quot; data-sort=&quot;name&quot;&gt;Name&lt;/th&gt;
          &lt;th class=&quot;sort&quot; data-sort=&quot;email&quot;&gt;Email&lt;/th&gt;
          &lt;th class=&quot;sort&quot; data-sort=&quot;age&quot;&gt;Age&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class=&quot;list&quot;&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Anna&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;anna@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;18&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Homer&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;homer@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;35&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Oscar&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;oscar@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;52&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Emily&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;emily@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;30&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Jara&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;jara@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;25&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Clark&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;clark@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;39&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Jennifer&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;jennifer@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;52&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Tony&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;tony@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;30&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Tom&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;tom@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;25&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Michael&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;michael@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;39&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Antony&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;antony@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;39&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Raymond&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;raymond@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;52&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Marie&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;marie@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;30&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Cohen&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;cohen@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;25&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Rowen&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;rowen@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;39&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row align-items-center mt-3&quot;&gt;
    &lt;div class=&quot;pagination d-none&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;col&quot;&gt;
      &lt;p class=&quot;mb-0 fs--1&quot;&gt;
        &lt;span class=&quot;d-none d-sm-inline-block&quot; data-list-info&gt;&lt;/span&gt;
        &lt;span class=&quot;d-none d-sm-inline-block&quot;&gt; &amp;mdash; &lt;/span&gt;
        &lt;a class=&quot;fw-semi-bold&quot; href=&quot;#!&quot; data-list-view=&quot;*&quot;&gt;View all&lt;span class=&quot;fas fa-angle-right ms-1&quot; data-fa-transform=&quot;down-1&quot;&gt;&lt;/span&gt;&lt;/a&gt;&lt;a class=&quot;fw-semi-bold d-none&quot; href=&quot;#!&quot; data-list-view=&quot;less&quot;&gt;View Less&lt;span class=&quot;fas fa-angle-right ms-1&quot; data-fa-transform=&quot;down-1&quot;&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-auto d-flex&quot;&gt;&lt;button class=&quot;btn btn-sm btn-primary&quot; type=&quot;button&quot; data-list-pagination=&quot;prev&quot;&gt;&lt;span&gt;Previous&lt;/span&gt;&lt;/button&gt;&lt;button class=&quot;btn btn-sm btn-primary px-4 ms-2&quot; type=&quot;button&quot; data-list-pagination=&quot;next&quot;&gt;&lt;span&gt;Next&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                    <div class="p-4 code-to-copy">
                      <div class="my-4" id="tableExample" data-list='{"valueNames":["name","email","age"],"page":5,"pagination":true}'>
                        <div class="table-responsive scrollbar">
                          <table class="table table-bordered table-striped fs--1 mb-0">
                            <thead class="bg-200 text-900">
                              <tr>
                                <th class="sort" data-sort="name">Name</th>
                                <th class="sort" data-sort="email">Email</th>
                                <th class="sort" data-sort="age">Age</th>
                              </tr>
                            </thead>
                            <tbody class="list">
                              <tr>
                                <td class="name">Anna</td>
                                <td class="email">anna@example.com</td>
                                <td class="age">18</td>
                              </tr>
                              <tr>
                                <td class="name">Homer</td>
                                <td class="email">homer@example.com</td>
                                <td class="age">35</td>
                              </tr>
                              <tr>
                                <td class="name">Oscar</td>
                                <td class="email">oscar@example.com</td>
                                <td class="age">52</td>
                              </tr>
                              <tr>
                                <td class="name">Emily</td>
                                <td class="email">emily@example.com</td>
                                <td class="age">30</td>
                              </tr>
                              <tr>
                                <td class="name">Jara</td>
                                <td class="email">jara@example.com</td>
                                <td class="age">25</td>
                              </tr>
                              <tr>
                                <td class="name">Clark</td>
                                <td class="email">clark@example.com</td>
                                <td class="age">39</td>
                              </tr>
                              <tr>
                                <td class="name">Jennifer</td>
                                <td class="email">jennifer@example.com</td>
                                <td class="age">52</td>
                              </tr>
                              <tr>
                                <td class="name">Tony</td>
                                <td class="email">tony@example.com</td>
                                <td class="age">30</td>
                              </tr>
                              <tr>
                                <td class="name">Tom</td>
                                <td class="email">tom@example.com</td>
                                <td class="age">25</td>
                              </tr>
                              <tr>
                                <td class="name">Michael</td>
                                <td class="email">michael@example.com</td>
                                <td class="age">39</td>
                              </tr>
                              <tr>
                                <td class="name">Antony</td>
                                <td class="email">antony@example.com</td>
                                <td class="age">39</td>
                              </tr>
                              <tr>
                                <td class="name">Raymond</td>
                                <td class="email">raymond@example.com</td>
                                <td class="age">52</td>
                              </tr>
                              <tr>
                                <td class="name">Marie</td>
                                <td class="email">marie@example.com</td>
                                <td class="age">30</td>
                              </tr>
                              <tr>
                                <td class="name">Cohen</td>
                                <td class="email">cohen@example.com</td>
                                <td class="age">25</td>
                              </tr>
                              <tr>
                                <td class="name">Rowen</td>
                                <td class="email">rowen@example.com</td>
                                <td class="age">39</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                        <div class="row align-items-center mt-3">
                          <div class="pagination d-none"></div>
                          <div class="col">
                            <p class="mb-0 fs--1"><span class="d-none d-sm-inline-block" data-list-info=""></span> <span class="d-none d-sm-inline-block">&mdash; </span><a class="fw-semi-bold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semi-bold d-none" href="#!" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a></p>
                          </div>
                          <div class="col-auto d-flex"><button class="btn btn-sm btn-primary" type="button" data-list-pagination="prev"><span>Previous</span></button><button class="btn btn-sm btn-primary px-4 ms-2" type="button" data-list-pagination="next"><span>Next</span></button></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card shadow-none border border-300 my-4" data-component-card="">
                  <div class="card-header p-4 border-bottom border-300 bg-soft">
                    <div class="row g-3 justify-content-between align-items-end">
                      <div class="col-12 col-md">
                        <h3 class="text-900 mb-0" data-anchor="">Pagination with numbering</h3>
                        <p class="mb-0 mt-2 text-800">Add <code>pagination</code> class for enable number pagination. The following structure will enable number pagination with next and previous button.</p>
                      </div>
                      <div class="col col-md-auto">
                        <nav class="nav nav-underline justify-content-end border-0 doc-tab-nav align-items-center" role="tablist"><button class="btn btn-link px-2 text-900 copy-code-btn" type="button">
                            <div class="fas fa-copy me-1"></div>Copy Code
                          </button><a class="btn btn-sm btn-phoenix-primary code-btn ms-2" data-bs-toggle="collapse" href="#pagination-with-numbering-code" role="button" aria-controls="pagination-with-numbering-code" aria-expanded="false"> <span class="me-2" data-feather="code"></span>View code</a><a class="btn btn-sm btn-phoenix-primary preview-btn ms-2"><span class="me-2" data-feather="eye"></span>Preview</a></nav>
                      </div>
                    </div>
                  </div>
                  <div class="card-body p-0">
                    <div class="collapse code-collapse" id="pagination-with-numbering-code"><pre class="scrollbar" style="max-height:420px"><code class="language-html">&lt;div id=&quot;tableExample2&quot; data-list='{&quot;valueNames&quot;:[&quot;name&quot;,&quot;email&quot;,&quot;age&quot;],&quot;page&quot;:5,&quot;pagination&quot;:true}'&gt;
  &lt;div class=&quot;table-responsive scrollbar&quot;&gt;
    &lt;table class=&quot;table table-bordered table-striped fs--1 mb-0&quot;&gt;
      &lt;thead class=&quot;bg-200 text-900&quot;&gt;
        &lt;tr&gt;
          &lt;th class=&quot;sort&quot; data-sort=&quot;name&quot;&gt;Name&lt;/th&gt;
          &lt;th class=&quot;sort&quot; data-sort=&quot;email&quot;&gt;Email&lt;/th&gt;
          &lt;th class=&quot;sort&quot; data-sort=&quot;age&quot;&gt;Age&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class=&quot;list&quot;&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Anna&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;anna@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;18&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Homer&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;homer@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;35&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Oscar&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;oscar@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;52&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Emily&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;emily@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;30&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Jara&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;jara@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;25&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Clark&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;clark@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;39&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Jennifer&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;jennifer@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;52&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Tony&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;tony@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;30&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Tom&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;tom@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;25&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Michael&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;michael@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;39&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Antony&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;antony@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;39&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Raymond&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;raymond@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;52&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Marie&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;marie@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;30&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Cohen&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;cohen@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;25&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;name&quot;&gt;Rowen&lt;/td&gt;
          &lt;td class=&quot;email&quot;&gt;rowen@example.com&lt;/td&gt;
          &lt;td class=&quot;age&quot;&gt;39&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class=&quot;d-flex justify-content-center mt-3&quot;&gt;&lt;button class=&quot;btn btn-sm btn-falcon-default me-1&quot; type=&quot;button&quot; title=&quot;Previous&quot; data-list-pagination=&quot;prev&quot;&gt;&lt;span class=&quot;fas fa-chevron-left&quot;&gt;&lt;/span&gt;&lt;/button&gt;
    &lt;ul class=&quot;pagination mb-0&quot;&gt;&lt;/ul&gt;&lt;button class=&quot;btn btn-sm btn-falcon-default ms-1&quot; type=&quot;button&quot; title=&quot;Next&quot; data-list-pagination=&quot;next&quot;&gt;&lt;span class=&quot;fas fa-chevron-right&quot;&gt;&lt;/span&gt;&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                    <div class="p-4 code-to-copy">
                      <div id="tableExample2" data-list='{"valueNames":["name","email","age"],"page":5,"pagination":true}'>
                        <div class="table-responsive scrollbar">
                          <table class="table table-bordered table-striped fs--1 mb-0">
                            <thead class="bg-200 text-900">
                              <tr>
                                <th class="sort" data-sort="name">Name</th>
                                <th class="sort" data-sort="email">Email</th>
                                <th class="sort" data-sort="age">Age</th>
                              </tr>
                            </thead>
                            <tbody class="list">
                              <tr>
                                <td class="name">Anna</td>
                                <td class="email">anna@example.com</td>
                                <td class="age">18</td>
                              </tr>
                              <tr>
                                <td class="name">Homer</td>
                                <td class="email">homer@example.com</td>
                                <td class="age">35</td>
                              </tr>
                              <tr>
                                <td class="name">Oscar</td>
                                <td class="email">oscar@example.com</td>
                                <td class="age">52</td>
                              </tr>
                              <tr>
                                <td class="name">Emily</td>
                                <td class="email">emily@example.com</td>
                                <td class="age">30</td>
                              </tr>
                              <tr>
                                <td class="name">Jara</td>
                                <td class="email">jara@example.com</td>
                                <td class="age">25</td>
                              </tr>
                              <tr>
                                <td class="name">Clark</td>
                                <td class="email">clark@example.com</td>
                                <td class="age">39</td>
                              </tr>
                              <tr>
                                <td class="name">Jennifer</td>
                                <td class="email">jennifer@example.com</td>
                                <td class="age">52</td>
                              </tr>
                              <tr>
                                <td class="name">Tony</td>
                                <td class="email">tony@example.com</td>
                                <td class="age">30</td>
                              </tr>
                              <tr>
                                <td class="name">Tom</td>
                                <td class="email">tom@example.com</td>
                                <td class="age">25</td>
                              </tr>
                              <tr>
                                <td class="name">Michael</td>
                                <td class="email">michael@example.com</td>
                                <td class="age">39</td>
                              </tr>
                              <tr>
                                <td class="name">Antony</td>
                                <td class="email">antony@example.com</td>
                                <td class="age">39</td>
                              </tr>
                              <tr>
                                <td class="name">Raymond</td>
                                <td class="email">raymond@example.com</td>
                                <td class="age">52</td>
                              </tr>
                              <tr>
                                <td class="name">Marie</td>
                                <td class="email">marie@example.com</td>
                                <td class="age">30</td>
                              </tr>
                              <tr>
                                <td class="name">Cohen</td>
                                <td class="email">cohen@example.com</td>
                                <td class="age">25</td>
                              </tr>
                              <tr>
                                <td class="name">Rowen</td>
                                <td class="email">rowen@example.com</td>
                                <td class="age">39</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                        <div class="d-flex justify-content-center mt-3"><button class="btn btn-sm btn-falcon-default me-1" type="button" title="Previous" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
                          <ul class="pagination mb-0"></ul><button class="btn btn-sm btn-falcon-default ms-1" type="button" title="Next" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card shadow-none border border-300 my-4" data-component-card="">
                  <div class="card-header p-4 border-bottom border-300 bg-soft">
                    <div class="row g-3 justify-content-between align-items-center">
                      <div class="col-12 col-md">
                        <h3 class="text-900 mb-0" data-anchor="">Docs</h3>
                      </div>
                    </div>
                  </div>
                  <div class="card-body p-0">
                    <div class="collapse code-collapse" id="docs-code"><pre class="scrollbar" style="max-height:420px"><code class="language-html">&lt;p&gt;Integrate List in phoenix by following these easy steps: &lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;Set unique ID and add &lt;code&gt;data-list &lt;/code&gt;attribute to the wrapper element and list your column in &lt;code&gt;valueNames &lt;/code&gt;property. &lt;pre class=&quot;my-1&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&amp;lt;div id=&amp;quot;tableExample&amp;quot; data-list='{&amp;quot;valueNames&amp;quot;:[&amp;quot;name&amp;quot;,&amp;quot;email&amp;quot;,&amp;quot;age&amp;quot;]}'&amp;gt;
  &amp;lt;!-- Your list content will go here--&amp;gt;
&amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/pre&gt;
  &lt;/li&gt;
  &lt;li&gt;To enable sorting in your column, add &lt;code&gt;data-sort &lt;/code&gt;attribute and assign column name to the attribute. &lt;pre class=&quot;my-1&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&amp;lt;th class=&amp;quot;sort&amp;quot; data-sort=&amp;quot;name&amp;quot;&amp;gt;Customer&amp;lt;/th&amp;gt;&lt;/code&gt;&lt;/pre&gt;
  &lt;/li&gt;
  &lt;li&gt;Add &lt;code&gt;list &lt;/code&gt;class to the content wrapper element.&lt;pre class=&quot;my-1&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&amp;lt;tbody class=&amp;quot;list&amp;quot;&amp;gt;
  &amp;lt;!-- Your value will go here--&amp;gt;
&amp;lt;/tbody&amp;gt;&lt;/code&gt;&lt;/pre&gt;
  &lt;/li&gt;
  &lt;li&gt;Then wrap your value with column name as a class. For example, if your column name is &lt;code&gt;name &lt;/code&gt;then the value will be look like this:&lt;pre class=&quot;my-1&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&amp;lt;td class=&amp;quot;name&amp;quot;&amp;gt;John Doe&amp;lt;/td&amp;gt;&lt;/code&gt;&lt;/pre&gt;
  &lt;/li&gt;
  &lt;li&gt;To add pagination add &lt;code&gt;.pagination &lt;/code&gt;class inside your wrapper element&lt;/li&gt;
  &lt;li&gt;To enable button pagination add &lt;code&gt;data-list-pagination='prev' &lt;/code&gt;and &lt;code&gt;data-list-pagination='next' &lt;/code&gt;to the &quot;Prev&quot; and &quot;Next&quot; buttons respectively.&lt;/li&gt;
  &lt;li&gt;To see the list info, add &lt;code&gt;data-list-info&lt;/code&gt; attribute to a DOM element inside your wrapper element.&lt;/li&gt;
&lt;/ul&gt;</code></pre>
                    </div>
                    <div class="p-4 code-to-copy">
                      <p>Integrate List in phoenix by following these easy steps:</p>
                      <ul>
                        <li>Set unique ID and add <code>data-list</code>attribute to the wrapper element and list your column in <code>valueNames</code>property.<pre class="my-1"><code class="language-html">&lt;div id=&quot;tableExample&quot; data-list='{&quot;valueNames&quot;:[&quot;name&quot;,&quot;email&quot;,&quot;age&quot;]}'&gt;
  &lt;!-- Your list content will go here--&gt;
&lt;/div&gt;</code></pre>
                        </li>
                        <li>To enable sorting in your column, add <code>data-sort</code>attribute and assign column name to the attribute.<pre class="my-1"><code class="language-html">&lt;th class=&quot;sort&quot; data-sort=&quot;name&quot;&gt;Customer&lt;/th&gt;</code></pre>
                        </li>
                        <li>Add <code>list</code>class to the content wrapper element.<pre class="my-1"><code class="language-html">&lt;tbody class=&quot;list&quot;&gt;
  &lt;!-- Your value will go here--&gt;
&lt;/tbody&gt;</code></pre>
                        </li>
                        <li>Then wrap your value with column name as a class. For example, if your column name is <code>name</code>then the value will be look like this:<pre class="my-1"><code class="language-html">&lt;td class=&quot;name&quot;&gt;John Doe&lt;/td&gt;</code></pre>
                        </li>
                        <li>To add pagination add <code>.pagination</code>class inside your wrapper element</li>
                        <li>To enable button pagination add <code>data-list-pagination='prev'</code>and <code>data-list-pagination='next'</code>to the "Prev" and "Next" buttons respectively.</li>
                        <li>To see the list info, add <code>data-list-info</code> attribute to a DOM element inside your wrapper element.</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-12 col-xl-2">
                <div class="position-sticky" style="top: 80px;">
                  <h5 class="lh-1">On this page</h5>
                  <hr class="text-300">
                  <ul class="nav nav-vertical flex-column doc-nav">
                    <li class="nav-item"><a class="nav-link" href="#example">Example</a></li>
                    <li class="nav-item"><a class="nav-link" href="#pagination-with-numbering">Pagination with numbering</a></li>
                    <li class="nav-item"><a class="nav-link" href="#docs">Docs</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <footer class="footer">
            <div class="row g-0 justify-content-between align-items-center h-100 mb-3">
              <div class="col-12 col-sm-auto text-center">
                <p class="mb-0 text-900">Copyright &copy; 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
              </div>
              <div class="col-12 col-sm-auto text-center">
                <p class="mb-0 text-600">v1.0.0</p>
              </div>
            </div>
          </footer>
        </div>
      </div>
    </main>
    <script src="static/js/phoenix.js"></script>
  </body>

</html>